<meta charset="utf-8">
<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="/manager"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">权限管理</a></li>
        <li class="active">学院管理</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
	<div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="instituteName">学院名:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="instituteName">
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4">学院状态:</label>
                    <div class="col-xs-8">
                        <select id="status" class="form-control">
                            <option value="">请选择</option>
                            <option value="0">正常</option>
                            <option value="1">弃用</option>
                        </select>
                    </div>
                </div>
                <shiro:hasPermission name="institute:list">
                    <div class="col-md-4 col-sm-6">
                        <button type="button" id="btn_query" class="btn btn-primary pull-right">查 询</button>
                        <button type="button" id="btn_requery" class="btn btn-primary pull-right mr5">重 填</button>
                    </div>
                </shiro:hasPermission>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">
            <shiro:hasPermission name="institute:add">
            <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#instituteModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增学院
            </button>
            </shiro:hasPermission>
            <shiro:hasPermission name="institute:batchDelete">
            <button id="btn_batch_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
            </button>
            </shiro:hasPermission>
        </div>
        <table id="table"></table>
    </div>
</section>
<!-- 课程新增模态框 -->
<div id="instituteModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog"  role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增学院</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="instituteForm">            
                    <div class="box-body">
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">学院名称 <span class="red">*</span>:</label>
                            <div class="col-sm-8">
                                <input  name="instituteName" class="form-control" require="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">学院简介 <span class="red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="description" class="form-control" require="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">排序 <span class="red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="sort" class="form-control" require="" plusinteger="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">学院标志 :</label>
                            <div class="col-sm-8" style="position: relative">
                                <input type="text" class="form-control" name="instituteLogo" id="instituteLogo" placeholder="封面图地址（建议800*300）">
                                <div class="jax-upload-btn" style="position: absolute;right:20px;top: 0">
                                    <i class="fa fa-cloud-upload upload-img-btn"></i>
                                </div>
                        	</div>
                    	</div>
                    	<div id="upload-content" class="upload-content form-group" style="padding-left:0">
                    		<label class="col-sm-3 control-label"></label>
                    	</div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveInstitute" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 分类详情模态框 -->
<div id="instituteDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学院信息</h4>
            </div>
            <div class="modal-body">
                <div id="instituteOpenWindow">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var editFlag = "[[${@perms.hasPerm('institute:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('institute:delete')}]]";
    var columns = [ 
    	{checkbox: true },
    	{
            field: 'id',
            title: '学院ID',
            align : "center",
            width : '5%',
        },{
            field: 'instituteName',
            title: '学院名称',
            align : "center",
            width : '15%',
        },{
            field: 'description',
            title: '学院简介',
            width : '45%',
            
        },{
            field: 'instituteLogo',
            title: '学院标志',
            align : "center",
            width : '5%',
            class:"logo-pre",
            formatter : function(value, row, index) {
                return '<img src="'+value+'"/>'
            }
        },{
            field: 'sort',
            title: '排序',
            align : "center",
            width : '5%',
        },{
            field: 'status',
            title: '课程状态',
            align : "center",
            width : '5%',
            formatter : function(status) {
               if(status == 0){
            	   return statusName = '<span class="label label-success">正常</span>';
               }else if(status == 1){
            	   return statusName = '<span class="label label-danger">弃用</span>';
               }
            }
        },{
            field : 'operation',
            title : '操作',
            align : "center",
            width : '15%',
            formatter : function(value, row, index) {
                var edit = editFlag=="true" ? '<a class="btn btn-primary btn-sm" onclick="editInstitute('+row.id+')"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 编辑</a>' : '';
                var del = deleteFlag=="true" ? '<a class="btn btn-danger btn-sm" onclick="deleteInstitute('+row.id+')"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</a>' : '';
                return edit + " " + del;
            }
        }];
    var options={
            id:"#table",
            url: '/institute/list',
            columns:columns,
            toolbar: '#toolbar',
            showRefresh: true,
            queryParams : queryParams
        }
        Core.initTable(options);

    /*查询参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit : params.limit, //页面大小
            offset : params.offset, //页码
            instituteName : $("#instituteName").val(),
            status : $("#status").val()
        };
        return temp;
    }

    /*编辑*/
    function editInstitute(id) {
        Core.load("#instituteOpenWindow","/institute/edit?id="+id,function(){
            $("#instituteDetailModal").modal("show");
        },2);
    }
    /*删除*/
    function deleteInstitute(id) {
        Core.confirm("确定删除该学院？",function () {
            Core.postAjax("/institute/delete",{"id":id},function (data) {
                if(data.status==200){
                	Core.refreshTable("#table");
                }
                layer.msg(data.msg);
            })
        })
    }
    
    $(function () {
    	/*重填*/
        $("#btn_requery").click(function(){
        	$("#formSearch")[0].reset();
        });
        /*查询*/
        $("#btn_query").click(function(){
            Core.refreshTable("#table");
        });
        /*新增*/
        $("#btn_add").click(function(){
            $("#instituteForm")[0].reset();
            Core.clearError("#instituteForm");
        });
        /*保存*/
        $("#saveInstitute").click(function(){
            if(doValidForm("#instituteForm")){
                Core.mask("#saveInstitute");
                Core.postAjax("/institute/add",$("#instituteForm").serialize(),function (data) {
                    Core.unmask("#saveInstitute");
                    if(data.status==200){
                        $("#instituteModal").modal("hide");
                        Core.refreshTable("#table");
                    }
                    layer.msg(data.msg);
                })
            };
        });

	    /*批量删除*/
	    $("#btn_batch_delete").click(function(){
	        var checkedRows= Core.selectMutiData("#table");
	        if(checkedRows){
	            Core.confirm("确定删除选中的"+checkedRows.length+"条记录？",function () {
	                var ids=[];
	                $.each(checkedRows, function (i, item) {
	                    ids.push(item.id);
	                })
	                Core.postAjax("/institute/batch/delete", {"ids": ids}, function (data) {
	                    if (data.status == 200) {
	                        Core.refreshTable("#table");
	                    }
	                    layer.msg(data.msg);
	                })
	            })
	        }
	    });
    });
    
    $(function () {
        /*上传图片*/
        $(".upload-img-btn").click(function(){
            if($("#upload-content").find(".upload-img-div").size()==0){
                var imgHtml = '<div class="col-md-8 upload-div upload-img-div">'+
                        '<div class="upload-item">'+
                        '<p class="upload-title">学院标识图</p>'+
                        '<p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>'+
                        '<p class="upload-btns">'+
                        '<a type="button" class="btn btn-sm btn-block btn-info imgUploader">上传</a>'+
                        '</p>'+
                        '</div>'+
                        '</div>'
                $("#upload-content").append(imgHtml);
                $(".imgUploader").upload({
                    server : '[[@{/upload/upload}]]',
                    swf: '/img/Uploader.swf',
                    imgAccept:true
                }, function(url, picker) {
                    $("#instituteLogo").val(url);
                    echoGtUploadResMethd(url,picker);
                });
            }
        })
    })
</script>